<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title>提示</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body, html {
            width: 100%;
            height: 100%;
            background: #444;
        }

        #compatibility {
            position: relative;
            top: 50%;
            margin-top: -160px;
            text-align: center;
        }

            #compatibility h4 {
                font-size: 22px;
                color: #ffffff;
                margin-bottom: 25px;
            }

            #compatibility span {
                font-size: 20px;
                color: #ffffff;
            }

        .item_list {
            width: 750px;
            margin: 0 auto;
            margin-top: 40px;
            overflow: hidden;
        }

            .item_list .item {
                width: 24.5%;
                /* display: inline-block; */
                float: left;
                text-align: center;
                position: relative;
            }

            .item_list .item_image {
                width: 80px;
                margin: 0 auto;
            }

                .item_list .item_image img {
                    width: 100%;
                }

        #compatibility .item_list .item span {
            font-size: 16px;
            display: inline-block;
            margin-top: 10px;
            width: 150px;
            text-align: center;
        }

        #compatibility .item_list .item a {
            color: #fff;
            /* text-decoration: none; */
        }

        .btn_info {
            padding: 12px 45px;
            text-align: center;
            background: #20a53a;
            color: #ffffff;
            text-decoration: none;
            /* display: block; */
        }

        .item_tips {
            padding: 2px 5px;
            background: red;
            font-size: 14px;
            color: #fff;
            transform: scale(0.8,0.8);
            font-style: normal;
            position: absolute;
            right: 20px;
        }
    </style>
</head>

<body>
  <div id="compatibility">
    <h4 class="title">当前浏览器版本过低，无法正常访问面板，请升级浏览器或使用其他浏览器访问面板</h4>
    <span class="vice-title">常用浏览器 : Chrome、Firefox、Safari、IE9+、国产浏览器（极速模式）</span>
    <div class="item_list">
      <div class="item">
        <div class="item_image" style="width:75px">
          <i class="item_tips">推荐</i>
          <img src="">
        </div>
        <span><a target="_blank" href="https://www.google.cn/chrome/">Chrome下载</a></span>
      </div>
      <div class="item">
        <div class="item_image">
          <img src="" />
        </div>
        <span><a target="_blank" href="http://www.firefox.com.cn/">Firefox下载</a></span>
      </div>
      <div class="item">
        <div class="item_image">
          <img src="" />
        </div>
        <span>Safari</span>
      </div>
      <div class="item">
        <div class="item_image">
          <img src="" />
        </div>
        <span>IE9+</span>
      </div>
    </div>   
  </div>
 
</body>
</html>